Suurte failide allalaadimise valdamine: Globaalne juhend esirakenduse Background Fetch API-le

Tänapäeva ühendatud maailmas eeldatakse veebirakendustelt üha enam keerukate ülesannete täitmist, sealhulgas suurte failide tõhusat ja usaldusväärset edastamist. Olgu tegemist kõrglahutusega filmi, mahuka tarkvarauuenduse, terve e-raamatute kogumiku või olulise andmekogumiga ettevõtte rakenduse jaoks, kasutajad üle maailma nõuavad sujuvat kogemust, sõltumata nende võrgutingimustest või seadme kasutusmustritest. Traditsiooniliselt on suurte allalaadimiste haldamine veebis olnud täis väljakutseid. Kasutaja, kes liigub vahelehelt eemale või kogeb hetkelist võrgukatkestust, võib koheselt ohtu seada pikaajalise allalaadimise, mis viib frustratsiooni ja raisatud andmemahuni. Siin astubki mängu võimas esirakenduse Background Fetch API, pakkudes robustset lahendust, mis muudab seda, kuidas veebirakendused käsitlevad püsivaid ja suuremahulisi failiedastusi.

See põhjalik juhend süveneb Background Fetch API-sse, uurides selle põhilisi funktsionaalsusi, praktilisi rakendusi ja parimaid tavasid. Uurime, kuidas see API, kasutades teenustöötajate (Service Workers) võimsust, annab arendajatele võimaluse luua tõeliselt vastupidavaid ja kasutajasõbralikke veebirakendusi, mis on võimelised haldama märkimisväärseid andmeoperatsioone taustal, parandades kogemust kasutajatele erinevates globaalsetes keskkondades.

Veebis suurte failide allalaadimise püsiv väljakutse

Enne täiustatud veebivõimekuste tulekut seisid esirakenduse arendajad silmitsi märkimisväärsete takistustega, kui neil tuli rakendada suurte failide allalaadimist. Veebi olekuta olemus ja brauseri liivakastikeskkond, pakkudes küll turvalisust, seadsid sageli piiranguid, mis muutsid usaldusväärsed ja pikaajalised operatsioonid keeruliseks. Uurime traditsioonilisi väljakutseid lähemalt:

Sõltuvus brauseri vahelehest: Habras ühendus

Üks traditsiooniliste veebiallaadimiste kõige kriitilisemaid piiranguid on nende olemuslik sõltuvus aktiivsest brauseri vahelehest. Kui kasutaja algatas allalaadimise, oli protsess lahutamatult seotud konkreetse vahelehega, kust see pärines. Kui kasutaja sulges kogemata vahelehe, navigeeris teisele lehele või isegi vahetas teise rakenduse vastu, lõppes allalaadimine tavaliselt järsult. See lõi väga habrase kogemuse, eriti suurte failide puhul, mille valmimine võis võtta minuteid või isegi tunde. Kujutage ette kasutajat rahvarohkes rahvusvahelises lennujaamas, kes on ühendatud katkendliku Wi-Fi-ga ja proovib oma pikale lennule filmi alla laadida. Lühike signaalikatkestus või tahtmatu vahelehe sulgemine tähendas allalaadimise otsast alustamist, raisates aega ja andmeid. See sõltuvus ei olnud lihtsalt ebamugavus; see oli fundamentaalne takistus tõeliselt robustsete veebirakenduste loomisel, mis suudaksid konkureerida natiivsete rakenduste kogemustega.

Võrgu ebastabiilsus: Globaalne reaalsus

Võrgutingimused on kogu maailmas väga erinevad. Kuigi mõned piirkonnad uhkeldavad välkkiire ja stabiilse internetiga, peavad paljud kasutajad, eriti arengumaades või maapiirkondades, leppima aeglaste, ebausaldusväärsete või sageli katkestatud ühendustega. Traditsioonilistel HTTP-allalaadimistel puuduvad brauseri vaatepunktist olemuslikud kordusmehhanismid või intelligentsed jätkamisvõimalused osaliste allalaadimiste jaoks (kuigi serverid võivad seda toetada, kaotab klient sageli oma oleku). Lühike võrgukatkestus, mis on paljudes maailma osades tavaline, võis allalaadimise püsivalt peatada, nõudes kasutajalt käsitsi taaskäivitamist. See mitte ainult ei valmista kasutajatele pettumust, vaid tekitab ka tarbetuid andmekulusid, kui nad kasutavad mõõdetud ühendusi, mis on mobiilikasutajate jaoks kogu maailmas tavaline stsenaarium. Vastupidavuse puudumine võrgu kõikumiste vastu on pikka aega olnud valupunkt veebiarendajatele, kes püüdlevad globaalse ulatuse ja juurdepääsetavuse poole.

Kasutajakogemuse probleemid: Ootamine ja ebakindlus

Suurte allalaadimiste puhul on kasutajakogemuse kriitiline aspekt läbipaistev edenemisest teavitamine. Kasutajad tahavad teada, kui palju on alla laaditud, kui palju on jäänud ja hinnangulist aega lõpuni. Traditsioonilised brauseri allalaadimishaldurid pakuvad mõningast põhiteavet, kuid selle sujuv integreerimine veebirakenduse kasutajaliidesesse oli sageli keeruline või piiratud. Lisaks loob halva kasutajakogemuse see, kui kasutajaid sunnitakse hoidma vahelehte avatuna ja aktiivsena lihtsalt allalaadimise jälgimiseks. See koormab süsteemiressursse, takistab neil muu sisuga tegelemast ja muudab rakenduse vähem professionaalseks. Kasutajad eeldavad, et saavad ülesande algatada ja usaldada, et see lõpetatakse taustal, võimaldades neil jätkata oma töövoogu või isegi sulgeda brauseri.

Piiratud edenemisinfo ja kontroll

Kuigi brauserid pakuvad elementaarset allalaadimise edenemise infot, oli traditsiooniliste allalaadimiste puhul detailsete reaalajas värskenduste saamine otse veebirakenduses tülikas. Arendajad kasutasid sageli pollimist või keerukaid serveripoolseid võimlemisi, mis lisasid keerukust ja koormust. Pealegi oli kasutajatel pärast allalaadimise algust vähe kontrolli. Allalaadimise peatamine, jätkamine või tühistamine keset protsessi oli tavaliselt kõik-või-mitte midagi operatsioon, mida haldas brauseri vaikimisi allalaadimishaldur, mitte veebirakenduse kohandatud kasutajaliides. See programmiline kontrolli puudumine piiras allalaadimishaldusfunktsioonide keerukust, mida arendajad said pakkuda.

Arendajate ressursihalduse lisakoormus

Arendajate jaoks tähendas suurte allalaadimiste haldamine traditsiooniliselt hulga erijuhtumitega tegelemist: võrguvigade käsitlemine, kordusloogika rakendamine, osaliste failide olekute haldamine ja andmete terviklikkuse tagamine. See viis sageli keeruka, vigadele altis koodini, mida oli raske hooldada ja skaleerida. Robustsete allalaadimisfunktsioonide loomine nullist, eriti nende, mis nõudsid taustal püsivust, oli märkimisväärne insenertehniline väljakutse, mis suunas ressursse eemale põhirakenduse arendamisest. Vajadus standardiseeritud, brauseritasemel lahenduse järele oli selge.

Tutvustame esirakenduse Background Fetch API-t

Background Fetch API on kaasaegne veebiplatvormi funktsioon, mis on loodud nende pikaajaliste väljakutsete lahendamiseks. See pakub robustset ja standardiseeritud viisi veebirakendustele suurte failide allalaadimiste (ja üleslaadimiste) algatamiseks ja haldamiseks taustal, isegi kui kasutaja liigub lehelt eemale või sulgeb brauseri. See API on üles ehitatud teenustöötajatele (Service Workers), kasutades nende võimet tegutseda brauseri põhilõimest sõltumatult ja säilitada olekut seansside vahel.

Mis see on? (Service Workeri ühendus)

Oma olemuselt töötab Background Fetch API, andes päringuoperatsiooni vastutuse üle teenustöötajale (Service Worker). Teenustöötaja on JavaScripti fail, mida brauser käitab taustal, eraldi peamisest veebilehest. See toimib programmeeritava proksina, püüdes kinni võrgupäringuid, vahemällu salvestades ressursse ja selles kontekstis haldades taustaülesandeid. Kui algatate taustapäringu, ütlete tegelikult brauserile oma teenustöötaja kaudu: "Palun lae need failid usaldusväärselt alla ja anna mulle teada, kui oled valmis või kui midagi läheb valesti." Seejärel võtab teenustöötaja üle, tegeledes võrgupäringute, korduste ja püsivusega, vabastades põhilõime ja kasutaja aktiivse seansi nendest muredest.

Background Fetchi peamised eelised

Background Fetch API pakub mitmeid murrangulisi eeliseid veebirakendustele, mis püüdlevad globaalse ja suure jõudlusega kogemuse poole:

• Usaldusväärsus: Allalaadimised jätkuvad ka siis, kui kasutaja sulgeb vahelehe, liigub eemale või kaotab võrguühenduse. Brauseri operatsioonisüsteem tegeleb päringuga, pakkudes robustseid kordusmehhanisme.
• Parem kasutajakogemus: Kasutajad saavad algatada suuri allalaadimisi ja jätkata sirvimist või sulgeda oma brauseri kindlustundega, teades, et allalaadimine lõpetatakse taustal. Edenemisteateid saab edastada natiivsete süsteemiteadete kaudu.
• Võrguühenduseta võimekus: Pärast allalaadimist saab sisu teha kättesaadavaks võrguühenduseta, mis on ülioluline rakenduste jaoks nagu meediamängijad, haridusplatvormid ja dokumendivaaturid, eriti piiratud või puuduva internetiühendusega piirkondades.
• Detailne kontroll: Arendajad saavad programmilise juurdepääsu allalaadimise edenemise jälgimiseks, edu/ebaõnnestumise olekute käsitlemiseks ja isegi käimasolevate päringute katkestamiseks otse oma veebirakendusest.
• Vähendatud ressursikulu: Raskete allalaadimisülesannete delegeerimisega teenustöötajale ja brauseri aluseks olevale võrgustikule jääb põhilõim reageerimisvõimeliseks, parandades üldist rakenduse jõudlust.
• Progressiivne täiustamine: See võimaldab arendajatel pakkuda paremat kogemust seal, kus seda toetatakse, pakkudes samal ajal sujuvat varulahendust brauseritele, mis veel API-d ei rakenda.

Põhimõisted: BackgroundFetchManager, BackgroundFetchRegistration, BackgroundFetchEvent

Background Fetch API tõhusaks kasutamiseks on oluline mõista selle peamisi komponente:

• BackgroundFetchManager: See on API sisenemispunkt, mis on saadaval läbi navigator.serviceWorker.ready.then(registration => registration.backgroundFetch). See võimaldab teil algatada uusi taustapäringuid ja hankida teavet olemasolevate kohta.
• BackgroundFetchRegistration: Esindab ühte taustapäringu operatsiooni. Kui algatate päringu, saate tagasi BackgroundFetchRegistration objekti. See objekt pakub päringu kohta üksikasju, nagu selle ID, kogumaht, allalaaditud baidid, olek, ja võimaldab sellega suhelda (nt katkestada). See saadab ka sündmusi teenustöötajale.
• BackgroundFetchEvent: Need on sündmused, mis käivitatakse teenustöötajas, kui taustapäringu olek muutub. Peamised sündmused hõlmavad backgroundfetchsuccess (kui kõik ressursid on alla laaditud), backgroundfetchfail (kui päring ebaõnnestub pärast korduste ammendamist), backgroundfetchabort (kui päring on käsitsi katkestatud) ja backgroundfetchprogress (perioodiliste edenemisvärskenduste jaoks).

Kuidas Background Fetch töötab: Süvitsi mehhanismi uurimine

Background Fetch API töövoo mõistmine on selle tõhusaks rakendamiseks ülioluline. See hõlmab koordineeritud pingutust põhilõime (teie veebilehe JavaScript) ja teenustöötaja vahel.

Taustapäringu algatamine põhilõimest

Protsess algab põhilõimes, tavaliselt vastusena kasutaja tegevusele, näiteks "Laadi film alla" või "Sünkrooni võrguühenduseta andmed" nupu klõpsamisele. Esiteks peate veenduma, et teie teenustöötaja on aktiivne ja valmis. Tavaliselt tehakse seda oodates navigator.serviceWorker.ready.

Kui teenustöötaja registreerimine on saadaval, pääsete juurde backgroundFetch haldurile ja kutsute välja selle fetch() meetodi:

            
async function startLargeDownload(fileUrl, downloadId, title) {
  if ('serviceWorker' in navigator && 'BackgroundFetchManager' in window) {
    try {
      const registration = await navigator.serviceWorker.ready;
      const bgFetch = await registration.backgroundFetch.fetch(
        downloadId, // Selle päringu unikaalne ID
        [fileUrl], // Päringuobjektide või URL-ide massiiv, mida pärida
        {
          title: title, // Pealkiri, mida kuvada süsteemi kasutajaliideses/teavitustes
          icons: [{ // Valikuline: Ikoonid süsteemi kasutajaliidese jaoks
            src: '/images/download-icon-128.png',
            sizes: '128x128',
            type: 'image/png'
          }],
          downloadTotal: 1024 * 1024 * 500 // Valikuline: Eeldatav baitide koguarv edenemise arvutamiseks (nt 500 MB)
        }
      );
      console.log('Taustapäring alustatud:', bgFetch.id);

      // Lisa sündmuste kuulajad registreerimisobjektile põhilõime värskenduste jaoks
      bgFetch.addEventListener('progress', () => {
        console.log(`Edenemine päringul ${bgFetch.id}: ${bgFetch.downloaded} / ${bgFetch.downloadTotal}`);
        // Uuenda kasutajaliidest siin, kui vaheleht on avatud
      });

      bgFetch.addEventListener('success', () => {
        console.log(`Allalaadimine ${bgFetch.id} lõpetatud edukalt!`);
        // Teavita kasutajat, uuenda kasutajaliidest
      });

      bgFetch.addEventListener('fail', () => {
        console.error(`Allalaadimine ${bgFetch.id} ebaõnnestus.`);
        // Teavita kasutajat ebaõnnestumisest
      });

      bgFetch.addEventListener('abort', () => {
        console.warn(`Allalaadimine ${bgFetch.id} katkestati.`);
      });

      return bgFetch;

    } catch (error) {
      console.error('Viga taustapäringu alustamisel:', error);
    }
  } else {
    console.warn('Background Fetch API ei ole toetatud.');
    // Kasuta varulahendusena traditsioonilisi allalaadimismeetodeid
    window.open(fileUrl, '_blank');
  }
}

// Kasutusnäide:
// startLargeDownload('/path/to/my/large-movie.mp4', 'movie-hd-001', 'Minu Äge Film HD');

            

              
                Copy
              
            
          

Vaatame lähemalt meetodi fetch() parameetreid:

• `id` (String, kohustuslik): Unikaalne identifikaator selle taustapäringu operatsiooni jaoks. See ID on ülioluline päringu hilisemaks kättesaamiseks ja duplikaatpäringute vältimiseks. See peab olema unikaalne kõigi teie päritolu aktiivsete taustapäringute seas.
• `requests` (Massiiv `Request` objektidest või URL-idest, kohustuslik): Massiiv, mis määrab allalaaditavad ressursid. Saate edastada lihtsaid URL-e stringidena või keerukamaid Request objekte HTTP päiste, meetodite jms kohandamiseks. Mitmeosaliste allalaadimiste või seotud varade pärimiseks võib see massiiv sisaldada mitut kirjet.
• `options` (Objekt, valikuline): Objekt taustapäringu konfigureerimiseks. Peamised omadused on järgmised:
  • `title` (String): Inimloetav pealkiri allalaadimise jaoks, mida kuvatakse sageli süsteemiteadetes või brauseri allalaadimise kasutajaliideses. Oluline kasutaja mõistmiseks.
  • `icons` (Massiiv objektidest): Pildiobjektide massiiv, millest igaühel on `src`, `sizes` ja `type` omadused. Neid ikoone kasutab operatsioonisüsteem allalaadimise visuaalseks esitamiseks.
  • `downloadTotal` (Number): Eeldatav allalaaditavate baitide koguarv. See on väga soovitatav, kuna see võimaldab brauseril kuvada täpset edenemisriba süsteemiteadetes. Kui seda ei esitata, kuvatakse edenemine määramatu spinnerina.
  • `uploadTotal` (Number): Sarnane `downloadTotal`-iga, kuid taustal toimuvate üleslaadimiste jaoks (kuigi see juhend keskendub allalaadimistele, toetab API mõlemat).
  • `start_url` (String): Valikuline URL, kuhu kasutaja tuleks suunata, kui ta klõpsab selle taustapäringuga seotud süsteemiteatisel.

Background Fetch sündmuste käsitlemine teenustöötajas

Tõeline maagia toimub teenustöötajas. Pärast algatamist võtab brauseri võrgustik üle, kuid teie teenustöötaja vastutab taustapäringu elutsükli sündmustele reageerimise eest. Need sündmused pakuvad võimalusi allalaaditud andmete salvestamiseks, kasutaja teavitamiseks või vigade käsitlemiseks. Teie teenustöötaja peab registreerima sündmuste kuulajad nende konkreetsete sündmuste jaoks:

            
// service-worker.js

self.addEventListener('backgroundfetchsuccess', async (event) => {
  const bgFetch = event.registration;
  console.log(`Taustapäring ${bgFetch.id} lõpetatud edukalt.`);

  // Juurdepääs allalaaditud kirjetele
  const records = await bgFetch.matchAll(); // Hangi kõik päritud vastused

  // Lihtsuse huvides eeldame ühe faili allalaadimist
  const response = await records[0].responseReady; // Oota, kuni vastus on valmis
  if (response.ok) {
    // Salvesta allalaaditud sisu, nt Cache API-sse või IndexedDB-sse
    const cache = await caches.open('my-downloads-cache');
    await cache.put(bgFetch.id, response);
    console.log(`Fail päringu ${bgFetch.id} jaoks vahemällu salvestatud.`);

    // Saada kasutajale teavitus
    await self.registration.showNotification(bgFetch.title || 'Allalaadimine lõpetatud',
      {
        body: `${bgFetch.title || 'Teie allalaadimine'} on valmis! Klõpsake avamiseks.`,
        icon: bgFetch.icons ? bgFetch.icons[0].src : '/images/default-icon.png',
        data: { url: bgFetch.start_url || '/' } // Valikuline: URL, mis avatakse klõpsamisel
      }
    );
  } else {
    console.error(`Edukate vastuste saamine päringule ${bgFetch.id} ebaõnnestus`);
    await self.registration.showNotification(bgFetch.title || 'Allalaadimine ebaõnnestus',
      {
        body: `Tekkis probleem ${bgFetch.title || 'teie allalaadimisega'}.`,
        icon: '/images/error-icon.png',
      }
    );
  }
  
  // Puhasta taustapäringu registreerimine pärast käsitlemist
  bgFetch.update({ status: 'completed' }); // Märgi lõpetatuks
  bgFetch.abort(); // Valikuline: Katkesta, et puhastada brauseri sisemine olek, kui seda enam vaja pole
});

self.addEventListener('backgroundfetchfail', async (event) => {
  const bgFetch = event.registration;
  console.error(`Taustapäring ${bgFetch.id} ebaõnnestus. Põhjus: ${bgFetch.failureReason}`);

  await self.registration.showNotification(bgFetch.title || 'Allalaadimine ebaõnnestus',
    {
      body: `Kahjuks ei saanud ${bgFetch.title || 'teie allalaadimist'} lõpule viia. Põhjus: ${bgFetch.failureReason || 'Tundmatu'}`,
      icon: bgFetch.icons ? bgFetch.icons[0].src : '/images/error-icon.png',
    }
  );
  // Rakenda kordusloogika või teavita kasutajat võrguprobleemidest
  // Kaalu info salvestamist IndexedDB-sse, et seda kasutajale näidata, kui rakendus järgmisel korral avatakse
});

self.addEventListener('backgroundfetchabort', async (event) => {
  const bgFetch = event.registration;
  console.warn(`Taustapäring ${bgFetch.id} katkestati.`);
  // Teavita kasutajat vajadusel, puhasta seotud andmed
  await self.registration.showNotification(bgFetch.title || 'Allalaadimine katkestatud',
    {
      body: `${bgFetch.title || 'Teie allalaadimine'} tühistati.`,
      icon: bgFetch.icons ? bgFetch.icons[0].src : '/images/warning-icon.png',
    }
  );
});

self.addEventListener('backgroundfetchclick', async (event) => {
  const bgFetch = event.registration;
  console.log(`Taustapäringu ${bgFetch.id} teatisele klõpsati.`);
  // Kasutaja klõpsas teatisele
  if (bgFetch.start_url) {
    clients.openWindow(bgFetch.start_url);
  } else {
    // Või ava konkreetne leht allalaadimiste näitamiseks
    clients.openWindow('/downloads');
  }
});

// Edenemisvärskenduste jaoks käivitatakse 'progress' sündmus ka teenustöötajas,
// kuid sageli tegeleb sellega põhilõim, kui see on kasutajaliidese värskendusteks aktiivne.
// Kui põhilõim ei ole aktiivne, saab teenustöötaja seda sündmust siiski kasutada
// logimiseks või keerukamaks taustatöötluseks enne 'success' sündmust.
self.addEventListener('backgroundfetchprogress', (event) => {
  const bgFetch = event.registration;
  console.log(`Teenustöötaja: Edenemine päringul ${bgFetch.id}: ${bgFetch.downloaded} / ${bgFetch.downloadTotal}`);
  // Tõenäoliselt ei taha te igal edenemisvärskendusel teavitust saata,
  // vaid pigem kasutada seda IndexedDB värskendamiseks või sisemiseks loogikaks.
});

            

              
                Copy
              
            
          

Selgitame iga teenustöötaja sündmust lähemalt:

• backgroundfetchsuccess: Käivitatakse, kui kõik taustapäringus olevad päringud on edukalt lõpule viidud. See on teie teenustöötaja jaoks kriitiline sündmus allalaaditud sisu töötlemiseks. Tavaliselt kasutate event.registration.matchAll(), et saada massiiv Response objektidest, mis vastavad algsetele päringutele. Sealt saate need vastused salvestada, kasutades Cache API-t võrguühenduseta juurdepääsuks või säilitada need IndexedDB-s struktureeritumaks andmesalvestuseks. Pärast töötlemist on hea tava teavitada kasutajat süsteemiteatise kaudu ja potentsiaalselt puhastada taustapäringu registreerimine.
• backgroundfetchfail: Käivitatakse, kui mõni taustapäringu päringutest ebaõnnestub pärast kõigi korduskatsete ammendamist. See sündmus võimaldab teie teenustöötajal vigadega sujuvalt toime tulla, teavitada kasutajat ebaõnnestumisest ja potentsiaalselt soovitada veaotsingu samme. event.registration.failureReason omadus annab rohkem konteksti selle kohta, miks päring ebaõnnestus (nt 'aborted', 'bad-status', 'quota-exceeded', 'network-error', 'none').
• backgroundfetchabort: Käivitatakse, kui rakendus (kas põhilõimest või teenustöötajast) katkestab taustapäringu programmiliselt, kasutades bgFetch.abort(), või kui kasutaja tühistab selle brauseri kasutajaliidese kaudu. See sündmus on puhastamiseks ja kasutajale teatamiseks, et operatsioon on peatatud.
• backgroundfetchclick: Käivitatakse, kui kasutaja klõpsab taustapäringu genereeritud süsteemiteatisel. See võimaldab teie teenustöötajal reageerida, avades teie rakenduses konkreetse lehe (nt jaotise 'Allalaadimised'), kus kasutaja pääseb juurde oma äsja allalaaditud sisule.
• backgroundfetchprogress: Käivitatakse perioodiliselt teenustöötajas, et teavitada allalaadimise käimasolevast edenemisest. Kuigi see sündmus on saadaval ka põhilõime BackgroundFetchRegistration-il, saab teenustöötaja seda kasutada taustal logimiseks, püsiva salvestusruumi edenemisega värskendamiseks või isegi keerukama loogika jaoks, kui põhirakendus ei ole aktiivne. Detailsete kasutajaliidese värskenduste jaoks on aga sageli tõhusam kuulata seda sündmust otse põhilõimele tagastatud BackgroundFetchRegistration objektil, eeldusel, et vaheleht jääb avatuks.

Edenemise ja oleku jälgimine

BackgroundFetchRegistration objekt on teie aken käimasoleva või lõpetatud taustapäringu olekusse ja edenemisse. Nii põhilõim kui ka teenustöötaja pääsevad sellele teabele juurde. Põhilõimes saate selle objekti otse, kui kutsute välja fetch(). Teenustöötajas on see saadaval kui event.registration taustapäringu sündmustes.

`BackgroundFetchRegistration` peamised omadused on järgmised:

• `id` (String): Unikaalne ID, mis anti päringu algatamisel.
• `downloadTotal` (Number): Eeldatav allalaaditavate baitide koguarv, nagu on määratud `options`-is (või 0, kui pole määratud).
• `downloaded` (Number): Seni allalaaditud baitide praegune arv.
• `uploadTotal` (Number): Eeldatav üleslaaditavate baitide koguarv (kui on asjakohane).
• `uploaded` (Number): Seni üleslaaditud baitide praegune arv (kui on asjakohane).
• `result` (String): 'success', 'failure' või 'aborted' pärast päringu lõpuleviimist. Enne lõpetamist on see `null`.
• `failureReason` (String): Annab rohkem detaile, kui `result` on 'failure' (nt 'network-error', 'quota-exceeded').
• `direction` (String): 'download' või 'upload'.
• `status` (String): 'pending', 'succeeded', 'failed', 'aborted'. See on päringu praegune olek.

Saate ka olemasolevaid taustapäringuid hankida, kasutades `BackgroundFetchManager`:

• `registration.backgroundFetch.get(id)`: Hangib konkreetse BackgroundFetchRegistration selle ID järgi.
• `registration.backgroundFetch.getIds()`: Tagastab Promise'i, mis laheneb massiiviga kõigist teie teenustöötaja hallatavatest aktiivsetest taustapäringute ID-dest.

            
// Põhilõim või teenustöötaja:
async function checkExistingDownloads() {
  if ('serviceWorker' in navigator && 'BackgroundFetchManager' in window) {
    const registration = await navigator.serviceWorker.ready;
    const ids = await registration.backgroundFetch.getIds();
    console.log('Aktiivsete taustapäringute ID-d:', ids);

    for (const id of ids) {
      const bgFetch = await registration.backgroundFetch.get(id);
      if (bgFetch) {
        console.log(`Päringu ID: ${bgFetch.id}, Olek: ${bgFetch.status}, Edenemine: ${bgFetch.downloaded}/${bgFetch.downloadTotal}`);
        // Kinnita sündmuste kuulajad, kui praegune leht seda ei algatanud
        // (kasulik rakenduse uuesti avamisel ja käimasolevate päringute nägemisel)
        bgFetch.addEventListener('progress', () => { /* uuenda kasutajaliidest */ });
        bgFetch.addEventListener('success', () => { /* käsitle edu */ });
        // jne.
      }
    }
  }
}
// checkExistingDownloads();

            

              
                Copy
              
            
          

Praktilised kasutusjuhud ja globaalsed näited

Background Fetch API avab veebirakendustele hulgaliselt võimalusi, muutes need vastupidavamaks, kasutajasõbralikumaks ja võimeliseks konkureerima natiivsete rakendustega globaalses mastaabis. Siin on mõned veenvad kasutusjuhud:

Meedia tarbimine võrguühenduseta (filmid, muusika, taskuhäälingud)

Kujutage ette kasutajat kauges India külas, kus internetiühendus on juhuslik ja kallis, kes soovib alla laadida hariduslikke dokumentaalfilme või muusikaalbumit. Või ärireisijat pikal lennul üle Atlandi, kes soovib vaadata eelnevalt allalaaditud filme, toetumata lennuki ebakindlale Wi-Fi-le. Meediavoogedastusplatvormid saavad kasutada Background Fetchi, et võimaldada kasutajatel järjekorda panna suuri videofaile, terveid taskuhäälingusarju või muusikaalbumeid allalaadimiseks. Need allalaadimised võivad toimuda vaikselt taustal, isegi kui kasutaja sulgeb rakenduse, ja olla valmis võrguühenduseta tarbimiseks. See parandab oluliselt kasutajakogemust globaalsetele sihtrühmadele, kes seisavad silmitsi erinevate ühenduvusprobleemidega.

Suurte failide sünkroonimine ja varundamine (pilvemälu)

Pilvemälu lahendused, veebipõhised dokumendiredaktorid ja digitaalsete varade haldussüsteemid tegelevad sageli suurte failidega – kõrge eraldusvõimega pildid, videoprojektide failid või keerukad arvutustabelid. Kasutaja Brasiilias, kes laadib üles suure disainifaili koostööplatvormile, või meeskond Saksamaal, kes sünkroonib projekti kausta, puutub sageli kokku ühenduse katkemise probleemidega. Background Fetch suudab tagada, et need kriitilised üles- ja allalaadimised lõpetatakse usaldusväärselt. Kui üleslaadimine katkeb, saab brauser selle automaatselt jätkata, pakkudes sujuvat andmete sünkroonimist ja meelerahu kasutajatele, kes tegelevad väärtusliku teabega.

Progressiivse veebirakenduse (PWA) varade uuendamine

PWA-d on loodud pakkuma rakendusesarnaseid kogemusi ja osa sellest hõlmab ajakohasena püsimist. PWA-de jaoks, millel on märkimisväärsed võrguühenduseta varad (nt suured pildikogud, ulatuslikud kliendipoolsed andmebaasid või keerukad kasutajaliidese raamistikud), võib nende varade uuendamine olla oluline taustaoperatsioon. Selle asemel, et sundida kasutajat jääma 'uuenduste laadimise' ekraanile, saab Background Fetch nende varade allalaadimisi vaikselt hallata. Kasutaja saab jätkata PWA olemasoleva versiooniga suhtlemist ja kui uued varad on valmis, saab teenustöötaja need sujuvalt sisse vahetada, pakkudes hõõrdumatut uuenduskogemust.

Mängude allalaadimised ja uuendused

Veebimängud, isegi brauseripõhised, on üha funktsioonirikkamad ja nõuavad sageli märkimisväärseid varade allalaadimisi (tekstuurid, helifailid, taseme andmed). Mängur Lõuna-Koreas, kes ootab uut mänguvärskendust, või kasutaja Kanadas, kes laadib alla täiesti uut brauseripõhist mängu, ei taha olla seotud avatud vahelehega. Background Fetch võimaldab mänguarendajatel neid suuri esialgseid allalaadimisi ja järgnevaid värskendusi tõhusalt hallata. Kasutajad saavad algatada allalaadimise, sulgeda oma brauseri ja naasta hiljem täielikult uuendatud või installitud mängu juurde, parandades drastiliselt veebipõhiste tiitlite mängukogemust.

Ettevõtte andmete sünkroonimine

Suurtele organisatsioonidele, mis tegutsevad mitmes ajavööndis ja piirkonnas, on andmete sünkroonimine esmatähtis. Kujutage ette müügimeeskonda Lõuna-Aafrikas, kes peab võrguühenduseta kliendiesitlusteks alla laadima põhjaliku tootekataloogi tuhandete piltide ja spetsifikatsioonidega, või inseneribürood Jaapanis, kes sünkroonib massiivseid CAD-faile. Background Fetch pakub usaldusväärset mehhanismi nende missioonikriitiliste andmeedastuste jaoks, tagades, et töötajatel on alati juurdepääs uusimale teabele, isegi kui nad töötavad eemalt või piiratud interneti infrastruktuuriga piirkondades.

Background Fetchi rakendamine: Samm-sammuline juhend

Vaatame läbi detailsema rakendusnäite, kombineerides põhilõime ja teenustöötaja loogikat suure faili allalaadimise haldamiseks.

1. Registreerige oma teenustöötaja

Esiteks veenduge, et teie teenustöötaja on registreeritud ja aktiivne. See kood läheb tavaliselt teie põhirakenduse JavaScripti faili:

            
// main.js

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js', { scope: '/' })
      .then(registration => {
        console.log('Teenustöötaja registreeritud skoobiga:', registration.scope);
      })
      .catch(error => {
        console.error('Teenustöötaja registreerimine ebaõnnestus:', error);
      });
  });
}

            

              
                Copy
              
            
          

2. Algatage päring põhilõimest

Kui kasutaja otsustab suure faili alla laadida, käivitab teie põhirakenduse loogika taustapäringu. Loome funktsiooni, mis tegeleb sellega, tagades varulahenduse toetamata brauserite jaoks.

            
// main.js (jätkub)

async function initiateLargeFileDownload(fileUrl, filename, fileSize) {
  const downloadId = `download-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
  const downloadTitle = `Laadin alla ${filename}`;

  if ('serviceWorker' in navigator && 'BackgroundFetchManager' in window) {
    try {
      const registration = await navigator.serviceWorker.ready;
      const bgFetch = await registration.backgroundFetch.fetch(
        downloadId,
        [{ url: fileUrl, headers: { 'Accept-Encoding': 'identity' } }], // Kasuta Request objekti suuremaks kontrolliks
        {
          title: downloadTitle,
          icons: [
            { src: '/images/download-icon-96.png', sizes: '96x96', type: 'image/png' },
            { src: '/images/download-icon-128.png', sizes: '128x128', type: 'image/png' }
          ],
          downloadTotal: fileSize // Veendu, et see on täpne!
        }
      );
      console.log('Taustapäring algatatud:', bgFetch.id);

      // Kinnita sündmuste kuulajad reaalajas kasutajaliidese värskenduste jaoks, kui vaheleht on aktiivne
      bgFetch.addEventListener('progress', (event) => {
        const currentFetch = event.registration;
        const percentage = Math.round((currentFetch.downloaded / currentFetch.downloadTotal) * 100);
        console.log(`Põhilõim: ${currentFetch.id} Edenemine: ${percentage}% (${currentFetch.downloaded} / ${currentFetch.downloadTotal})`);
        updateDownloadProgressUI(currentFetch.id, percentage, currentFetch.downloaded, currentFetch.downloadTotal, 'downloading');
      });

      bgFetch.addEventListener('success', (event) => {
        const currentFetch = event.registration;
        console.log(`Põhilõim: ${currentFetch.id} õnnestus.`);
        updateDownloadProgressUI(currentFetch.id, 100, currentFetch.downloaded, currentFetch.downloadTotal, 'succeeded');
        showToastNotification(`'${filename}' allalaadimine lõpetatud!`);
        // Teenustöötaja tegeleb salvestamise ja tegeliku faili kättesaadavusega
      });

      bgFetch.addEventListener('fail', (event) => {
        const currentFetch = event.registration;
        console.error(`Põhilõim: ${currentFetch.id} ebaõnnestus. Põhjus: ${currentFetch.failureReason}`);
        updateDownloadProgressUI(currentFetch.id, 0, 0, currentFetch.downloadTotal, 'failed', currentFetch.failureReason);
        showToastNotification(`'${filename}' allalaadimine ebaõnnestus: ${currentFetch.failureReason}`, 'error');
      });

      bgFetch.addEventListener('abort', (event) => {
        const currentFetch = event.registration;
        console.warn(`Põhilõim: ${currentFetch.id} katkestati.`);
        updateDownloadProgressUI(currentFetch.id, 0, 0, currentFetch.downloadTotal, 'aborted');
        showToastNotification(`'${filename}' allalaadimine katkestati.`, 'warning');
      });

      // Salvesta taustapäringu ID lokaalsesse mällu või IndexedDB-sse
      // et rakendus saaks sellega uuesti ühenduda, kui kasutaja vahelehe sulgeb ja uuesti avab
      storeOngoingDownload(downloadId, filename, fileSize);

    } catch (error) {
      console.error('Taustapäringu algatamine ebaõnnestus:', error);
      fallbackDownload(fileUrl, filename);
    }
  } else {
    console.warn('Background Fetch API ei ole toetatud. Kasutatakse varulahendust.');
    fallbackDownload(fileUrl, filename);
  }
}

function updateDownloadProgressUI(id, percentage, downloaded, total, status, reason = '') {
  const element = document.getElementById(`download-item-${id}`);
  if (element) {
    element.querySelector('.progress-bar').style.width = `${percentage}%`;
    element.querySelector('.status-text').textContent = `${status.toUpperCase()}: ${percentage}% (${formatBytes(downloaded)} / ${formatBytes(total)}) ${reason ? `(${reason})` : ''}`;
    // Lisa keerukamaid kasutajaliidese värskendusi, nt pausi/tühistamisnuppude näitamine
  } else {
    // Loo uus kasutajaliidese element, kui tegemist on uue allalaadimisega või rakendus just avati
    createDownloadUIElement(id, percentage, downloaded, total, status, reason);
  }
}

function createDownloadUIElement(id, percentage, downloaded, total, status, reason) {
  const downloadsContainer = document.getElementById('downloads-list');
  const itemHtml = `
    

      
${id.split('-')[0]} Fail
      

        

      
      
${status.toUpperCase()}: ${percentage}% (${formatBytes(downloaded)} / ${formatBytes(total)}) ${reason ? `(${reason})` : ''}
      Katkesta
    
  `;
  downloadsContainer.insertAdjacentHTML('beforeend', itemHtml);
}

async function abortDownload(id) {
  if ('serviceWorker' in navigator && 'BackgroundFetchManager' in window) {
    const registration = await navigator.serviceWorker.ready;
    const bgFetch = await registration.backgroundFetch.get(id);
    if (bgFetch) {
      await bgFetch.abort();
      console.log(`Katkestati päring ${id} kasutajaliidesest.`);
    }
  }
}

function fallbackDownload(url, filename) {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  showToastNotification(`Laadin alla '${filename}' brauseri kaudu. Palun hoidke vaheleht avatuna.`);
}

function showToastNotification(message, type = 'info') {
  // Rakenda lihtne kasutajaliidese teavitussüsteem
  console.log(`Teavitus (${type}): ${message}`);
}

function formatBytes(bytes, decimals = 2) {
  if (bytes === 0) return '0 baiti';
  const k = 1024;
  const dm = decimals < 0 ? 0 : decimals;
  const sizes = ['baiti', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

function storeOngoingDownload(id, filename, fileSize) {
  // Kasutades lihtsuse huvides localStorage'i, kuid IndexedDB on robustsemaks salvestuseks parem
  let ongoingDownloads = JSON.parse(localStorage.getItem('ongoingDownloads') || '[]');
  ongoingDownloads.push({ id, filename, fileSize, status: 'pending', downloaded: 0, total: fileSize });
  localStorage.setItem('ongoingDownloads', JSON.stringify(ongoingDownloads));
}

async function loadAndMonitorExistingDownloads() {
  if (!('serviceWorker' in navigator && 'BackgroundFetchManager' in window)) return;

  const registration = await navigator.serviceWorker.ready;
  const ids = await registration.backgroundFetch.getIds();
  const storedDownloads = JSON.parse(localStorage.getItem('ongoingDownloads') || '[]');

  for (const stored of storedDownloads) {
    if (ids.includes(stored.id)) {
      const bgFetch = await registration.backgroundFetch.get(stored.id);
      if (bgFetch) {
        // Kinnita kuulajad uuesti ja uuenda kasutajaliidest olemasolevate päringute jaoks
        const percentage = Math.round((bgFetch.downloaded / bgFetch.downloadTotal) * 100);
        updateDownloadProgressUI(bgFetch.id, percentage, bgFetch.downloaded, bgFetch.downloadTotal, bgFetch.status);

        bgFetch.addEventListener('progress', (event) => {
          const currentFetch = event.registration;
          const percentage = Math.round((currentFetch.downloaded / currentFetch.downloadTotal) * 100);
          updateDownloadProgressUI(currentFetch.id, percentage, currentFetch.downloaded, currentFetch.downloadTotal, 'downloading');
        });
        // Kinnita uuesti ka success, fail, abort kuulajad
        bgFetch.addEventListener('success', (event) => { /* ... */ });
        bgFetch.addEventListener('fail', (event) => { /* ... */ });
        bgFetch.addEventListener('abort', (event) => { /* ... */ });
      }
    } else {
      // See allalaadimine võis lõppeda või ebaõnnestuda, kui rakendus oli suletud
      // Kontrolli bgFetch.result, kui see on eelmisest sessioonist saadaval, uuenda kasutajaliidest vastavalt
      console.log(`Allalaadimist ${stored.id} ei leitud aktiivsete päringute hulgast, tõenäoliselt lõpetatud või ebaõnnestunud.`);
      // Potentsiaalselt eemalda lokaalsest mälust või märgi lõpetatuks/ebaõnnestunuks
    }
  }
}

// Kutsu see välja rakenduse laadimisel, et jätkata kasutajaliidese kuvamist käimasolevate allalaadimiste jaoks
// window.addEventListener('load', loadAndMonitorExistingDownloads);


            

              
                Copy
              
            
          

Märkus päringu päiste kohta: Näide kasutab headers: { 'Accept-Encoding': 'identity' }. See on levinud praktika, kui tegeletakse allalaadimistega, mis salvestatakse töötlemata kujul, tagades, et server ei rakenda sisukodeeringuid (nagu gzip), mida võib enne salvestamist olla vaja kliendi poolel lahti pakkida. Kui server saadab juba tihendamata faile või kui kavatsete need lahti pakkida, ei pruugi see vajalik olla.

3. Käsitlege sündmusi teenustöötajas

Teie `service-worker.js` fail sisaldab sündmuste kuulajaid, nagu varem kirjeldatud. Täpsustame loogikat salvestamiseks ja teavitamiseks.

            
// service-worker.js

// Vahemälu nimed allalaadimiste ja potentsiaalselt saidi varade jaoks
const CACHE_NAME_DOWNLOADS = 'my-large-downloads-v1';

self.addEventListener('install', (event) => {
  self.skipWaiting(); // Aktiveeri uus teenustöötaja kohe
  console.log('Teenustöötaja installitud.');
});

self.addEventListener('activate', (event) => {
  event.waitUntil(clients.claim()); // Võta kontroll olemasolevate klientide üle
  console.log('Teenustöötaja aktiveeritud.');
});

// backgroundfetchsuccess: Salvesta sisu ja teavita kasutajat
self.addEventListener('backgroundfetchsuccess', async (event) => {
  const bgFetch = event.registration;
  console.log(`SW: Taustapäring ${bgFetch.id} õnnestus.`);

  let downloadSuccessful = true;
  try {
    const records = await bgFetch.matchAll();
    const cache = await caches.open(CACHE_NAME_DOWNLOADS);

    for (const record of records) {
      const response = await record.responseReady;
      if (response.ok) {
        // Kasuta unikaalset vahemälu võtit, nt algne URL või bgFetch.id + loendur
        await cache.put(record.request.url, response.clone()); // Kloonimine on oluline, kuna vastust saab tarbida ainult üks kord
        console.log(`SW: Salvestatud ${record.request.url} vahemällu.`);
      } else {
        console.error(`SW: Eduka vastuse saamine ebaõnnestus päringule ${record.request.url}. Olek: ${response.status}`);
        downloadSuccessful = false;
        // Potentsiaalselt eemalda osaliselt allalaaditud failid või märgi ebaõnnestunuks
        break; // Peata töötlemine, kui üks osa ebaõnnestus
      }
    }

    if (downloadSuccessful) {
      await self.registration.showNotification(bgFetch.title || 'Allalaadimine lõpetatud',
        {
          body: `${bgFetch.title || 'Teie allalaadimine'} on nüüd võrguühenduseta saadaval!`,
          icon: bgFetch.icons ? bgFetch.icons[0].src : '/images/default-icon.png',
          badge: '/images/badge-icon.png', // Valikuline: Väike ikoon tegumiribale/olekuribale
          data: { bgFetchId: bgFetch.id, type: 'download-complete' },
          actions: [
            { action: 'open-download', title: 'Ava', icon: '/images/open-icon.png' },
            { action: 'delete-download', title: 'Kustuta', icon: '/images/delete-icon.png' }
          ]
        }
      );
      // Valikuline: Uuenda IndexedDB-d, et märkida allalaadimine lõpetatuks
    } else {
      // Käsitle stsenaariumit, kus kõik osad ei õnnestunud
      await self.registration.showNotification(bgFetch.title || 'Allalaadimine osaline/ebaõnnestunud',
        {
          body: `Osa ${bgFetch.title || 'teie allalaadimisest'} ei saanud lõpule viia. Palun kontrollige.`,
          icon: '/images/error-icon.png',
        }
      );
    }
  } catch (error) {
    console.error(`SW: Viga backgroundfetchsuccess ajal päringu ${bgFetch.id} jaoks:`, error);
    downloadSuccessful = false;
    await self.registration.showNotification(bgFetch.title || 'Allalaadimise viga',
      {
        body: `Tekkis ootamatu viga ${bgFetch.title || 'teie allalaadimisega'}.`,
        icon: '/images/error-icon.png',
      }
    );
  }

  // Pärast käsitlemist puhasta taustapäringu registreerimine
  // Spetsifikatsioon soovitab mitte kutsuda abort() kohe pärast edu/ebaõnnestumist
  // kui soovite hoida registreerimist aktiivsena jälgimiseks või ajalooliste andmete jaoks.
  // Kuid kui allalaadimine on tõesti tehtud ja selle andmed salvestatud, võite selle tühjendada.
  // Selle näite jaoks peame seda käsitletuks.
});

// backgroundfetchfail: Teavita kasutajat ebaõnnestumisest
self.addEventListener('backgroundfetchfail', async (event) => {
  const bgFetch = event.registration;
  console.error(`SW: Taustapäring ${bgFetch.id} ebaõnnestus. Põhjus: ${bgFetch.failureReason}`);

  await self.registration.showNotification(bgFetch.title || 'Allalaadimine ebaõnnestus',
    {
      body: `Kahjuks ei saanud ${bgFetch.title || 'teie allalaadimist'} lõpule viia. Põhjus: ${bgFetch.failureReason || 'Tundmatu'}`,
      icon: bgFetch.icons ? bgFetch.icons[0].src : '/images/error-icon.png',
      badge: '/images/error-badge.png',
      data: { bgFetchId: bgFetch.id, type: 'download-failed' }
    }
  );
  // Valikuline: Uuenda IndexedDB-d, et märkida allalaadimine ebaõnnestunuks, pakkudes potentsiaalselt kordusvõimalust
});

// backgroundfetchabort: Teavita kasutajat tühistamisest
self.addEventListener('backgroundfetchabort', async (event) => {
  const bgFetch = event.registration;
  console.warn(`SW: Taustapäring ${bgFetch.id} katkestati.`);
  // Valikuliselt eemalda osalised allalaadimised vahemälust/IndexedDB-st
  await self.registration.showNotification(bgFetch.title || 'Allalaadimine katkestatud',
    {
      body: `${bgFetch.title || 'Teie allalaadimine'} tühistati.`,
      icon: bgFetch.icons ? bgFetch.icons[0].src : '/images/warning-icon.png',
      data: { bgFetchId: bgFetch.id, type: 'download-aborted' }
    }
  );
});

// notificationclick: Käsitle kasutaja interaktsiooni teavitustega
self.addEventListener('notificationclick', (event) => {
  const notification = event.notification;
  const primaryClient = clients.matchAll({ type: 'window', includeUncontrolled: true }).then(clientList => {
    for (const client of clientList) {
      if (client.url.startsWith(self.location.origin) && 'focus' in client) {
        return client.focus();
      }
    }
    return clients.openWindow(notification.data.url || '/downloads');
  });

  event.waitUntil(primaryClient);

  // Käsitle teavituse tegevusi (nt 'Ava', 'Kustuta')
  if (event.action === 'open-download') {
    event.waitUntil(clients.openWindow('/downloads'));
  } else if (event.action === 'delete-download') {
    // Rakenda loogika allalaaditud faili kustutamiseks vahemälust/IndexedDB-st
    // ja uuenda põhilõime kasutajaliidest, kui see on aktiivne.
    const bgFetchIdToDelete = notification.data.bgFetchId;
    // Näide: Kustuta Cache API-st
    caches.open(CACHE_NAME_DOWNLOADS).then(cache => {
      cache.delete(bgFetchIdToDelete); // Või ID-ga seotud konkreetne URL
      console.log(`SW: Kustutatud allalaadimine ${bgFetchIdToDelete} vahemälust.`);
    });
    notification.close();
  }
});


// backgroundfetchprogress: Kasuta sisemiseks loogikaks või harvemateks värskendusteks, kui põhilõim pole aktiivne
self.addEventListener('backgroundfetchprogress', (event) => {
  const bgFetch = event.registration;
  console.log(`SW: Edenemine päringul ${bgFetch.id}: ${bgFetch.downloaded} / ${bgFetch.downloadTotal}`);
  // Siin võiksite värskendada IndexedDB-d edenemisega püsiva oleku jaoks,
  // kuid tavaliselt haldab edenemise teavitusi kasutajale OS/brauser.
});


            

              
                Copy
              
            
          

4. Edenemise kuvamine kasutajale (põhilõim ja teavitused)

Nagu põhilõime koodis näidatud, on `bgFetch.addEventListener('progress', ...)` ülioluline rakenduse kasutajaliidese värskendamiseks, kui vaheleht on avatud. Taustaoperatsioonide puhul pakuvad brauseri natiivsed süsteemiteavitused (käivitatud `self.registration.showNotification()` abil teenustöötajas) edenemisvärskendusi ja hoiatusi, isegi kui brauser on suletud või minimeeritud. See kahekordne lähenemine tagab suurepärase kasutajakogemuse, sõltumata nende aktiivsest seotusest rakendusega.

On ülioluline kujundada oma kasutajaliides nii, et see kuvaks elegantselt allalaadimise edenemist, võimaldaks kasutajatel päringuid tühistada ja näitaks lõpetatud või ebaõnnestunud allalaadimiste olekut. Kaaluge oma PWA-s spetsiaalset jaotist "Allalaadimised", kus kasutajad saavad vaadata kõiki oma taustapäringute tegevusi.

5. Allalaaditud sisu kättesaamine

Kui taustapäring on edukas ja teenustöötaja on sisu salvestanud (nt Cache API-sse või IndexedDB-sse), vajab teie põhirakendus viisi sellele juurdepääsuks. Cache API-sse salvestatud sisu puhul saate kasutada standardset caches.match() või caches.open(), et hankida `Response` objekt. IndexedDB puhul kasutaksite selle API-t oma salvestatud andmete pärimiseks.

            
// main.js (näide vahemällu salvestatud sisu hankimiseks)

async function getDownloadedFile(originalUrl) {
  if ('caches' in window) {
    const cache = await caches.open(CACHE_NAME_DOWNLOADS);
    const response = await cache.match(originalUrl);
    if (response) {
      console.log(`Hankisin ${originalUrl} vahemälust.`);
      // Nüüd saate vastusega töötada, nt luua kuvamiseks Object URL-i
      const blob = await response.blob();
      return URL.createObjectURL(blob);
    } else {
      console.log(`${originalUrl} ei leitud vahemälust.`);
      return null;
    }
  }
  return null;
}

// Näide: Allalaaditud video kuvamine
// const videoUrl = await getDownloadedFile('/path/to/my/large-movie.mp4');
// if (videoUrl) {
//   const videoElement = document.getElementById('my-video-player');
//   videoElement.src = videoUrl;
//   videoElement.play();
// }

            

              
                Copy
              
            
          

Täpsemad kaalutlused ja parimad tavad

Tõeliselt robustse ja kasutajasõbraliku kogemuse loomiseks Background Fetch API abil kaaluge neid täpsemaid teemasid ja parimaid tavasid:

Veakäsitlus ja kordusmehhanismid

API pakub olemuslikult teatud kordusloogikat, kuid teie rakendus peaks olema valmis erinevateks ebaõnnestumise stsenaariumideks. Kui toimub `backgroundfetchfail` sündmus, on `event.registration.failureReason` omadus hindamatu. Võimalikud põhjused on `'network-error'`, `'bad-status'` (nt 404 või 500 HTTP vastus), `'quota-exceeded'` (kui brauseril saab salvestusruum otsa) või `'aborted'`. Teie teenustöötaja saab:

• Vigade logimine: Saatke vea üksikasjad oma analüütika- või logimisteenusele, et jälgida jõudlust ja tuvastada levinumaid ebaõnnestumispunkte kogu maailmas.
• Kasutaja teavitamine: Suhtle selgelt ebaõnnestumise põhjusega kasutajale püsivate teavituste kaudu.
• Kordusloogika: `network-error` puhul võite soovitada kasutajal oma ühendust kontrollida. `bad-status` puhul võite soovitada võtta ühendust toega. `quota-exceeded` puhul soovitada ruumi vabastada. Rakendage nutikas kordusmehhanism (nt eksponentsiaalne taganemine), kui see on asjakohane, kuigi brauser tegeleb põhiliste kordustega sisemiselt.
• Puhastamine: Eemaldage osalised failid või ajutised andmed, mis on seotud ebaõnnestunud päringutega, et ruumi vabastada.

Kasutajaliidese tagasiside ja teavitused

Tõhus suhtlus kasutajaga on esmatähtis. See hõlmab:

• Edenemisribad: Dünaamilised edenemisribad veebilehel, kui see on aktiivne, ja süsteemitaseme teavitused (koos `downloadTotal` määratlemisega) tausta edenemise jaoks.
• Olekuindikaatorid: Selged ikoonid või tekst, mis näitavad "Allalaadimine", "Peatatud", "Ebaõnnestunud", "Lõpetatud" või "Katkestatud".
• Tegevust võimaldavad teavitused: Kasutage teavitustegevusi (`actions` massiiv `showNotification` funktsioonis), et võimaldada kasutajatel allalaadimist "Avada", "Kustutada" või "Uuesti proovida" otse süsteemiteatisest, suurendades mugavust.
• Püsiv allalaadimiste nimekiri: Spetsiaalne jaotis teie PWA-s (nt '/downloads'), kus kasutajad saavad vaadata kõigi möödunud ja käimasolevate taustapäringute olekut, algatada uuesti ebaõnnestunuid või hallata allalaaditud sisu. See on eriti oluline ebastabiilsete ühendustega piirkondade kasutajatele, kes võivad sageli allalaadimisi uuesti külastada.

Ribalaiuse ja ressursside haldamine

Olge teadlik kasutaja ribalaiusest, eriti piirkondades, kus andmeside on kallis või piiratud. Background Fetch API on loodud olema tõhus, kuid saate seda veelgi optimeerida, tehes järgmist:

• Kasutaja eelistuste austamine: Kontrollige navigator.connection.effectiveType või navigator.connection.saveData, et määrata võrgutingimused ja kasutaja andmesäästu eelistus. Pakkuge madalama kvaliteediga allalaadimisi või küsige kinnitust enne suuri ülekandeid aeglastel või mõõdetud võrkudel.
• Päringute grupeerimine: Mitme väikese faili puhul on sageli tõhusam grupeerida need üheks taustapäringu operatsiooniks, selle asemel et algatada palju individuaalseid päringuid.
• Prioritiseerimine: Kui laadite alla mitut faili, kaaluge esmalt kriitilise sisu prioritiseerimist.
• Kettakvoodi haldamine: Olge teadlik brauseri salvestusruumi kvootidest. `quota-exceeded` `failureReason` käivitub, kui proovite liiga palju alla laadida. Rakendage strateegiaid salvestusruumi haldamiseks, näiteks võimaldades kasutajatel vanu allalaadimisi kustutada.

Võrguühenduseta salvestusruum (IndexedDB, Cache API)

Background Fetch API tegeleb võrgupäringuga, kuid teie vastutate hangitud `Response` objektide salvestamise eest. Kaks peamist mehhanismi on:

• Cache API: Ideaalne staatiliste varade, meediumifailide või mis tahes vastuse salvestamiseks, mida saab otse URL-iga vastendada. Lihtne kasutada koos caches.open().put(request, response).
• IndexedDB: Võimas, madala taseme API suurte struktureeritud andmemahtude kliendipoolseks salvestamiseks. Kasutage seda keerukamate andmeskeemide, allalaadimistega seotud metaandmete või siis, kui vajate robustseid päringuvõimalusi. Näiteks allalaaditud video metaandmete (pealkiri, pikkus, kirjeldus, allalaadimise kuupäev) salvestamine koos selle binaarandmetega (Blobina). Teegid nagu Dexie.js võivad IndexedDB interaktsioone lihtsustada.

Sageli on kasulik mõlema kombinatsioon: Cache API töötlemata allalaaditud sisu jaoks ja IndexedDB metaandmete, allalaadimise olekute ja kõigi päringute loendi haldamiseks.

Turvamõjud

Nagu kõigi võimsate veebi-API-de puhul, on turvalisus esmatähtis:

• Ainult HTTPS: Teenustöötajad ja seega ka Background Fetch API nõuavad turvalist konteksti (HTTPS). See tagab andmete terviklikkuse ja hoiab ära vahendusrünnakud (man-in-the-middle attacks).
• Sama päritolu poliitika: Kuigi saate pärida ressursse erinevatest päritoludest, töötab teenustöötaja ise teie veebisaidi sama päritolu poliitika piirangute piires. Olge ettevaatlik sisu osas, mida alla laadite ja kuidas seda käsitlete.
• Sisu valideerimine: Valideerige alati allalaaditud sisu, eriti kui see on kasutaja loodud või pärineb ebausaldusväärsetest allikatest, enne selle töötlemist või kuvamist.

Brauseri ühilduvus ja varulahendused

Background Fetch API on suhteliselt uus ja võimas funktsioon. 2023. aasta lõpu / 2024. aasta alguse seisuga on see peamiselt hästi toetatud Chromiumi-põhistes brauserites (Chrome, Edge, Opera, Samsung Internet). Firefox ja Safari ei ole seda veel rakendanud või on see kaalumisel. Globaalse sihtrühma jaoks on ülioluline rakendada robustseid varulahendusi:

• Funktsiooni tuvastamine: Kontrollige alati `'serviceWorker' in navigator` ja `'BackgroundFetchManager' in window` olemasolu enne API kasutamist.
• Traditsioonilised allalaadimised: Kui Background Fetch ei ole toetatud, kasutage varulahendusena standardset brauseri allalaadimist (nt luues `<a>` sildi `download` atribuudiga ja käivitades klõpsu). Teavitage kasutajat, et nad peavad vahelehe avatuna hoidma.
• Progressiivne täiustamine: Kujundage oma rakendus nii, et põhifunktsionaalsus töötab ilma Background Fetchita ja API lihtsalt täiustab kogemust toetatud brauserite jaoks.

Testimine ja silumine

Teenustöötajate ja taustprotsesside silumine võib olla keeruline. Kasutage brauseri arendaja tööriistu:

• Chrome DevTools: Vahekaart "Application" pakub jaotisi teenustöötajate (registreerimise jälgimine, käivitamine/peatamine, sündmuste saatmine), vahemälu salvestusruumi ja IndexedDB jaoks. Taustapäringud on samuti nähtavad spetsiaalse jaotise "Background Services" või "Application" all (sageli pesastatud "Background fetches" alla).
• Logimine: Ulatuslikud `console.log` avaldused nii teie põhilõimes kui ka teenustöötajas on sündmuste voo mõistmiseks hädavajalikud.
• Sündmuste simuleerimine: Mõned brauseri arendaja tööriistad võimaldavad teil käsitsi käivitada teenustöötaja sündmusi (nagu 'sync' või 'push'), mis võib olla kasulik taustaloogika testimiseks, kuigi taustapäringu sündmuste otsene simuleerimine võib olla piiratud ja tugineb tavaliselt tegelikule võrgutegevusele.

Tulevikuväljavaated ja seotud tehnoloogiad

Background Fetch API on osa laiemast püüdlusest tuua veebiplatvormile võimsamaid võimalusi, mis on sageli grupeeritud algatuste alla nagu Project Fugu (või "Capabilities Project"). Selle projekti eesmärk on vähendada lõhet veebirakenduste ja natiivsete rakenduste vahel, paljastades veebile rohkem seadme riistvara ja operatsioonisüsteemi funktsioone turvalisel ja privaatsust säilitaval viisil. Veebi arenedes võime oodata rohkem selliseid API-sid, mis parandavad võrguühenduseta võimekust, süsteemi integreerimist ja jõudlust.

Veebivõimekused ja Project Fugu

Background Fetch API on suurepärane näide veebivõimekusest, mis nihutab veebirakenduste võimete piire. Teised seotud Project Fugu API-d, mis parandavad kasutajakogemust ja võrguühenduseta võimekust, on järgmised:

• Perioodiline taustasünkroonimine: Väikeste andmemahtude regulaarseks sünkroonimiseks.
• Web Share API: Sisu jagamiseks teiste seadmes olevate rakendustega.
• File System Access API: Otsesemaks suhtluseks kasutaja kohaliku failisüsteemiga (kasutaja selgesõnalisel loal).
• Badging API: Lugemata arvu või oleku kuvamiseks rakenduse ikoonidel.

Need API-d üheskoos annavad arendajatele võimaluse luua veebirakendusi, mis on funktsionaalsuse ja kasutajakogemuse poolest natiivsetest rakendustest eristamatud, mis on märkimisväärne võit globaalsele sihtrühmale, kellel on erinevad seadme-eelistused ja -võimalused.

Workboxi integreerimine

Paljude arendajate jaoks võib otse teenustöötaja API-dega töötamine olla keeruline. Teegid nagu Workbox lihtsustavad levinud teenustöötaja mustreid, sealhulgas vahemälustrateegiaid ja taustasünkroonimist. Kuigi Workboxil ei ole veel otsest moodulit spetsiaalselt Background Fetchi jaoks, pakub see tugeva aluse teie teenustöötaja haldamiseks ja seda saab kasutada koos teie kohandatud Background Fetchi rakendusega. API küpsedes võime näha tihedamat integratsiooni selliste teekidega.

Võrdlus teiste API-dega (Fetch, XHR, Streams)

On oluline mõista, kuhu Background Fetch sobib võrreldes teiste võrgu-API-dega:

• Standardne `fetch()` ja XHR: Need on lühiajaliste, sünkroonsete (või promise-põhiste asünkroonsete) päringute jaoks, mis on seotud aktiivse brauseri vahelehega. Need sobivad enamiku andmete hankimiseks, kuid ebaõnnestuvad, kui vaheleht suletakse või võrk katkeb. Background Fetch on püsivate, pikaajaliste ülesannete jaoks.
• Streams API: Kasulik suurte vastuste töötlemiseks tükkhaaval, mida saab kombineerida `fetch()` või Background Fetchiga. Näiteks `backgroundfetchsuccess` sündmus võiks hankida vastuse ja seejärel kasutada loetavaid vooge allalaaditud sisu järkjärguliseks töötlemiseks, selle asemel et oodata kogu blobi mälus olemist. See on eriti kasulik väga suurte failide või reaalajas töötlemise jaoks.

Background Fetch täiendab neid API-sid, pakkudes alusmehhanismi usaldusväärseks taustaülekandeks, samas kui `fetch()` (või XHR) võidakse kasutada väiksemate, esiplaanil toimuvate interaktsioonide jaoks ja Streams'i saab kasutada mõlema kaudu saadud andmete tõhusaks töötlemiseks. Peamine eristus on Background Fetchi "tausta" ja "püsiv" olemus.

Kokkuvõte: Tugevate esirakenduse allalaadimiste võimaldamine

Esirakenduse Background Fetch API kujutab endast märkimisväärset sammu edasi veebiarenduses, muutes põhjalikult seda, kuidas suuri faile kliendi poolel käsitletakse. Võimaldades tõeliselt püsivaid ja usaldusväärseid allalaadimisi, mis suudavad üle elada vahelehtede sulgemise ja võrgukatkestused, annab see arendajatele võimaluse luua progressiivseid veebirakendusi, mis pakuvad natiivse sarnast kogemust. See ei ole lihtsalt tehniline täiustus; see on kriitiline võimaldaja globaalsele sihtrühmale, kellest paljud sõltuvad katkendlikest või vähem usaldusväärsetest internetiühendustest.

Alates sujuvast võrguühenduseta meedia tarbimisest arenevatel turgudel kuni robustse ettevõtte andmete sünkroonimiseni kontinentide vahel, sillutab Background Fetch teed vastupidavamale ja kasutajasõbralikumale veebile. Kuigi see nõuab hoolikat rakendamist, eriti seoses veakäsitluse, kasutaja tagasiside ja salvestusruumi haldamisega, on parema kasutajakogemuse ja rakenduse usaldusväärsuse eelised tohutud. Brauseri toe laienedes muutub Background Fetch API integreerimine teie veebirakendustesse asendamatuks strateegiaks maailmatasemel digitaalsete kogemuste pakkumiseks kasutajatele kõikjal.

Lisamaterjalid

• MDN Web Docs: Background Fetch API
• Google Chrome Developers: Background Fetch API kasutamine
• Project Fugu API staatus
• MDN Web Docs: Service Worker API
• Web.dev: Rakenda sobiv vahemälu kontroll